<template>
  <div class="container">
    <div class="sub_title  lr_nav_bot_bd">
      <div class="safe_area_box"></div>
      <div class="bot">
        <i class="iconfont lricon-fanhui" @click="goBack"></i>
        <div class="tit_txt">(六壬起个课APP-分组)</div>
        <i @click="showAddForm" class="iconfont lricon-tianjia"></i>
      </div>
    </div>
    <!-- 分组管理面板 -->
    <div class="group-panel">
      <div class="group-list">
        <div v-for="(group, index) in groups"  class="group-item"
          >
          <div class="group-info">
            <div class="group-icon" >
              <i class="iconfont lricon-zhufenzu" style="font-size: 24rem;"></i>
            </div>
            <div class="group-details">
              <span class="group-name">{{ group }}</span>
              <span class="group-count">10 条起课记录</span>
            </div>
          </div>
          <div class="group-actions" >
            <button class="action-btn" title="编辑分组" @click.stop="editGroup(index)">
              <i class="fa iconfont lricon-bianji"></i>
            </button>
            <button class="action-btn delete-btn" title="删除分组" @click.stop="showDeleteConfirm(index)">
              <i class="fa iconfont lricon-shanchu"></i>
            </button>
          </div>
        </div>
<div style="width: 100%;margin-bottom: 30vh;"></div>
      </div>
    </div>
       <van-overlay :lazy-render="false" :show="showDeleteDialog" @click="showDeleteDialog = false">
      <transition name="van-slide-up">
        <div style="justify-content: center;" class="wrapper_overlay" @click.stop="" v-show="showDeleteDialog">
             <!-- 删除确认弹窗 - 修复后可以正常弹出 -->
    <div class="delete-confirm" :class="{ active: showDeleteDialog }">
      <div class="confirm-dialog">
        <!-- 弹窗装饰 -->
        <!-- <div class="dialog-decoration"></div> -->

        <h3 class="confirm-title">确认删除</h3>
        <p class="confirm-message">你确定要删除“{{ deletingGroupName }}”分组吗？该分组内的记录不会被删除。</p>
        <div class="confirm-actions">
          <button class="confirm-btn confirm-cancel" @click="showDeleteDialog = false">取消</button>
          <button class="confirm-btn confirm-delete" @click="deleteGroup">删除</button>
        </div>
      </div>
    </div>
        </div>
      </transition>
    </van-overlay>
    <van-overlay :lazy-render="false" :show="showForm" @click="showForm = false">

      <transition name="van-slide-up">
        <div class="wrapper_overlay" @click.stop="" v-show="showForm">
          <!-- 添加/编辑分组表单 -->
          <div class="add-group-form" :class="{ active: showForm }">
            <h3 class="form-title">{{ isEditing ? '编辑分组' : '新建分组' }}</h3>
            <div class="form-group">
              <label class="form-label">分组名称</label>
              <input type="text" class="form-input" v-model="formGroupName" placeholder="输入分组名称"
                @keyup.enter="submitForm" ref="formInput">
            </div>
            <div class="form-actions">
              <button class="cancel-form-btn" @click="cancelForm">取消</button>
              <button class="submit-form-btn" @click="submitForm">{{ isEditing ? '保存' : '创建' }}</button>
            </div>
          </div>
        </div>
      </transition>
    </van-overlay>
  </div>
</template>

<script>
import { Overlay } from 'vant';
import { Store, getStore } from '@tauri-apps/plugin-store';
import { getBackgroundColor } from '../api/styleUtils';
export default {
  components: {
    VanOverlay: Overlay
  },
  data() {
    return {
      showForm: false,
      isEditing: false,
      formGroupName: '',
      groupToEdit: null,
      showDeleteDialog: false,  // 控制删除弹窗显示的变量
      groupToDelete: null,
      slcIndex: null,
      groups:[],
      store: null,
      getBgc: getBackgroundColor
    };
  },
  async created() {
     const store = await Store.load('data.bin')
      console.log(store);
      // 设置一个值
  ;
    let qikeGroups = await store.get('qikeGroups');
    if (qikeGroups == null || qikeGroups == undefined) {
      qikeGroups =  [
        '全部','默认','朋友','家人','QQ','微信'
      ]
      await store.set('qikeGroups', qikeGroups);
      this.groups = qikeGroups
    } else {
      this.groups = qikeGroups
    }
    let qikeGroups2 = await store.get('qikeGroups');
    store.save()
  },
  computed: {
    deletingGroupName() {
     
    }
  },
  methods: {
    // 关闭面板
    closePanel() {
      this.$emit('close');
    },

    // 显示添加分组表单
    showAddForm() {
      this.isEditing = false;
      this.formGroupName = '';
      this.groupToEdit = null;
      this.showForm = true;
      this.focusInput();
    },

    // 显示编辑分组表单
    editGroup(index) {
      this.showForm = true
      this.isEditing = true;
      this.slcIndex = index
         this.focusInput();
    },

    // 取消表单操作
    cancelForm() {
      this.showForm = false;
      this.formGroupName = '';
      this.groupToEdit = null;
    },

    // 提交表单（添加或编辑）
    async submitForm() {
      const store = await Store.load('data.bin')
      if (this.isEditing) {
        if (this.formGroupName == this.groups[this.slcIndex] || this.formGroupName=='') {
        alert('名称未修改')
        } else {
          this.groups[this.slcIndex] = this.formGroupName
        store.set('qikeGroups',this.groups)
        }
       this.slcIndex = null
      } else {
        if (this.groups.includes(this.formGroupName)|| this.formGroupName=='') {
        alert('该分组已存在，无法添加！')
        } else {
          this.groups.push(this.formGroupName)
        store.set('qikeGroups',this.groups)
        }
     }
store.save()
      this.cancelForm();
    },

    // 自动聚焦到输入框
    focusInput() {
      setTimeout(() => {
        this.$refs.formInput?.focus();
      }, 100);
    },

    // 显示删除确认弹窗 - 确保正确设置状态
    showDeleteConfirm(index) {
      // 调试用：确认此方法被调用
      this.slcIndex = index
      this.showDeleteDialog = true;  // 关键：设置为true以显示弹窗
    },

    // 删除分组
    async deleteGroup() {
      const store = await Store.load('data.bin')
       this.groups.splice(this.slcIndex,1)
       this.showDeleteDialog = false;
      this.slcIndex = -999
      store.set('qikeGroups', this.groups)
        store.save()
    },

    // 设置激活分组
    setActiveGroup(groupId) {
      const activeGroup = this.groups.find(g => g.id === groupId);
      if (activeGroup) {
        this.groups.forEach(group => {
          group.active = group.id === groupId;
        });
        this.$emit('active-group', activeGroup);
      }
    },

    // 获取分组图标样式类
    getGroupIconClass(groupName) {
      switch (groupName) {
        case '好友': return 'icon-friends';
        case '家人': return 'icon-family';
        case '同窗': return 'icon-classmate';
        case '同僚': return 'icon-colleague';
        default: return 'icon-other';
      }
    },

    // 获取分组图标
    getGroupIcon(groupName) {
      switch (groupName) {
        case '好友': return 'fa-users';
        case '家人': return 'fa-home';
        case '同窗': return 'fa-book';
        case '同僚': return 'fa-briefcase';
        default: return 'fa-folder';
      }
    },
    goBack() {
      this.$router.push("/")
    }
  }
};
</script>

<style lang="scss" scoped>
// 颜色定义
$primary: #9e2a2b;
$primary-light: #fff1f1;
$primary-dark: #720909;
$secondary: #8b4513;
$secondary-light: #f5ebe0;
$accent: #c9a063;
$accent-light: #f9f2e6;
$text-primary: #332720;
$text-secondary: #6b5a4b;
$background: #ffffff;
$danger: #a62f00;

// 深色装饰条颜色
$decor-dark-1: #2c1e16;
$decor-dark-2: #4a3324;
$decor-dark-3: #2c1e16;

.container {
  background-color: var(--lr_lcbgc);
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 999;

  .sub_title {
    width: 100vw;
    background-color: var(--nav_bg_color);
    display: flex;
    align-items: center;
    flex-direction: column;

    .bot {
      i {
        font-size: 18rem;
        color: var(--btn_fbg_color);
      }
      width: 92vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .tit_txt {
      width: fit-content;
      height: 30rem;
      line-height: 30rem;
        font-size: 18px;
      font-weight: 600;
      text-align: center;
      background-color: var(--nav_bg_color);
      color: black;
    }
  }
}

.group-panel {
  width: 100vw;
  flex-grow: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  /* 降低面板z-index，确保弹窗可以覆盖 */
}

.panel-decoration {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: linear-gradient(90deg, $decor-dark-1 0%, $decor-dark-2 50%, $decor-dark-3 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &.top {
    top: 0;
    border-radius: 8px 8px 0 0;
  }

  &.bottom {
    bottom: 0;
    border-radius: 0 0 8px 8px;
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0d2c0;

  .panel-title {
    font-size: 22px;
    font-weight: 600;
    color: $primary;
    letter-spacing: 0.5px;
  }

  .close-btn {
    background: none;
    border: 1px solid #d4c3ad;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: $text-secondary;
    transition: all 0.3s ease;

    &:hover {
      background-color: $primary-light;
      color: $primary;
      border-color: $primary;
    }
  }
}

.wrapper_overlay {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 100%;
}

.add-group-form {
  margin-top: 30vh;
  background-color: white;
  border-radius: 6px;
  display: none;
  border: 1px solid #e8e8e8;
  width: 94vw;

  &.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
  }

  .form-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-left: 7vw;
    color: $text-primary;
    padding-bottom: 8px;
    width: 80vw;
    border-bottom: 1px dashed #e8e8e8;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    align-items: center;

    .form-label {
      display: block;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 8px;
      color: black;
    }

    .form-input {
      width: 80vw;
      padding: 5px 5px;
      height: 30px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      font-size: 16px;
      background-color: whitesmoke;
      transition: all 0.3s ease;

      &:focus {
        outline: none;
        border-color: #e8e8e8;
        // box-shadow: 0 0 0 2px rgba(201, 160, 99, 0.2);
      }
    }
  }

  .form-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    margin-bottom: 10px;

    .cancel-form-btn,
    .submit-form-btn {
      padding: 8px 18px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: bold;
      color: black;
      cursor: pointer;
      border: none;
      transition: all 0.3s ease;
    }

    .cancel-form-btn {

      background-color: transparent;


      &:hover {
        background-color: $background;
        border-color: $text-secondary;
      }
    }

    .submit-form-btn {

      background-color: #fff;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}

.group-list {
  flex-grow: 1;
  overflow: scroll;
  max-height: 95vh;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 6px;
    margin-top: 10px;
    width: calc(94vw - 28px);
    background-color: whitesmoke;
    transition: all 0.3s ease;
    cursor: pointer;
    // border: 1px solid #e8e8e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    &:active {
      background-color: #e8e8e8;
    }

    &.slide-in {
      animation: slideIn 0.4s ease forwards;
    }

    &.slide-out {
      animation: slideOut 0.3s ease forwards;
    }

    .group-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .group-icon {
        width: 42px;
        height: 42px;
        border-radius: 6px;
        display: flex;
        background-color: var(--cart_bg_color);
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .group-details {
        display: flex;
        flex-direction: column;

        .group-name {
          font-size: 17px;
          font-weight: 600;
          color: $text-primary;
        }

        .group-count {
          color: #2c2c2c;
          font-size: 13px;
          margin-top: 2px;

        }
      }
    }

    .group-actions {
      display: flex;
      gap: 8px;

      .action-btn {
        background: none;
        border: 1px solid transparent;
        width: 34px;
        height: 34px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        transition: all 0.3s ease;

        &:hover {
          background-color: rgba(255, 255, 255, 0.6);
          color: $text-primary;
          border-color: #d4c3ad;
        }

        &.delete-btn:hover {
          color: $danger;
          border-color: rgba(166, 47, 0, 0.3);
        }
      }
    }
  }

  .add-group {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px dashed #e8e8e8;
    color: black;
    font-size: 26px;
    font-weight: 500;
    background-color: whitesmoke;
    width: 94vw;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;

    &:hover {
      border-color: $primary;
      background-color: $primary-light;
      transform: translateY(-2px);
    }
  }
}

// 修复的删除确认弹窗样式
.delete-confirm {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* 确保弹窗z-index高于面板 */
  opacity: 0;
  width: 94vw;border-radius: 6px;
  transition: all 0.3s ease;

  // 关键修复：当active时显示弹窗
  &.active {
    opacity: 1;

    .confirm-dialog {
      transform: scale(1);
      opacity: 1;
    }
  }

  .confirm-dialog {
    width: 94vw;
    background-color: white;
    border-radius: 6px;
    padding: 24px;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.4s ease;
    // box-shadow: 0 10px 30px rgba(51, 39, 32, 0.25);
    border: 1px solid #e8e8e8;
    position: relative;

    .dialog-decoration {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 40px;
      height: 40px;
      background-color: $primary;
      border-radius: 4px;
      opacity: 0.8;
      transform: rotate(15deg);
      z-index: -1;
    }

    .confirm-title {
      font-size: 19px;
      font-weight: 600;
      color: black;
      margin-bottom: 16px;
      text-align: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #e8e8e8;
    }

    .confirm-message {
      font-size: 15px;
      color: black;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .confirm-actions {
      display: flex;
      gap: 12px;

      .confirm-btn {
        flex: 1;
        padding: 10px;
        border-radius: 4px;
        font-size: 15px;
        font-weight: bolder;color: rgb(0, 0, 0);
        cursor: pointer;
        transition: all 0.3s ease;background-color: whitesmoke;
      }

      .confirm-cancel {
        border: 1px solid #e8e8e8;
      }

      .confirm-delete {
        
        
        border: 1px solid #e8e8e8;

        // &:hover {
        //   background-color: #8c2400;
        //   transform: translateY(-1px);
        // }
      }
    }
  }
}

// 图标样式
.icon-friends {
  background-image: linear-gradient(135deg, $primary, $primary-dark);
}

.icon-family {
  background-image: linear-gradient(135deg, $secondary, #633510);
}

.icon-classmate {
  background-image: linear-gradient(135deg, #285943, #1a3d2e);
}

.icon-colleague {
  background-image: linear-gradient(135deg, $accent, #a07d40);
}

.icon-other {
  background-image: linear-gradient(135deg, #4a6fa5, #355480);
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(20px);
    opacity: 0;
    height: 0;
    margin-bottom: 0;
    padding: 0;
  }
}

// 滚动条样式
::-webkit-scrollbar {
  display: none;
}

// ::-webkit-scrollbar-track {
//   background: $secondary-light;
//   border-radius: 4px;
// }

// ::-webkit-scrollbar-thumb {
//   background-color: rgba(139, 69, 19, 0.3);
//   border-radius: 4px;
//   border: 1px solid $secondary-light;
// }

// ::-webkit-scrollbar-thumb:hover {
//   background-color: rgba(139, 69, 19, 0.5);
// }
</style>